<template>
  <div>
    <div id="SCatterChart2" />
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
// lib
import * as echarts from "echarts";
// components & widgets
import ResizeChartVm from "@/public/base/ResizeChartVm";
// config
// script & public
// controller & service
// interface
// 其它

@Component
export default class LineChart extends ResizeChartVm {
  mounted() {
    this.initChart();
  }
  initChart() {
    const el = document.getElementById("SCatterChart2");
    if (!el) {
      this.$message.error("没有图表挂载点");
      return;
    }
    this.chartE = echarts.init(el);

    const options: echarts.EChartsOption = {
      title: {
        text: "bar",
      },
      tooltip: {
        trigger: "item",
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView: {},
          restore: {
            title: "还原",
          },
          dataZoom: {},
        },
      },
      xAxis: {
        type: "value",
        scale: true,
      },
      yAxis: {
        type: "value",
        scale: true,
      },
      series: [
        {
          name: "一月",
          data: [
            [230, 200],
            [330, 200],
            [230, 300],
            [230, 280],
          ],
          type: "effectScatter",
          symbolSize: 20,
          itemStyle: {
            color: "red",
          },
          effectType: "ripple",
          showEffectOn: "emphasis",
        },
      ],
    };
    this.chartE.setOption(options);
  }
}
</script>

<style scoped lang="scss">
#SCatterChart2 {
  width: 50%;
  height: 300px;
}
</style>
